<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('员工排班列表')" />
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
    <style>
        body, *{
            padding:0px;
            margin:0px;
            box-sizing: border-box;
        }
        .calendar
        {
            background-color: white;
            padding: 20px;
            /*box-shadow: 0px 5px 10px rgba(0,0,0,0.4);*/


            border-radius: 26px;

        }

        .calendar .dropdown
        {
            display: none;
            position: absolute;
            background-color: #fff;

            border-radius: 2em;
            backdrop-filter: blur(5px);
            background-color: rgba(255, 255, 255, 0.8);

            color: #005781;
            text-align: center;
            font-size: 14pt;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 30px;
            padding-right: 30px;
            width: 160px;
            left: 0px;
            z-index: 2000;
            border-radius: 20px;
            border: 2px solid #ccc;
        }

        .calendar .dropdown .dropdown-item
        {
            cursor:pointer;
            opacity: .7;
            transition: .5s opacity;
        }

        .calendar .dropdown .dropdown-item:hover
        {
            opacity: 1;
        }

        .calendar .years
        {
            display:none;
        }

        .calendar .title
        {
            text-align:center;
            font-size:20pt;
        }

        .calendar .calendar-btn
        {
            float: left;
            background-color: #1083c6;
            color: white;
            text-align: center;
            font-size: 14pt;
            padding-top: 5px;
            padding-bottom: 5px;
            position: relative;
            /* width: 60px; */
            cursor: pointer;
            transition: .5s background-color;

            /* border-radius: 12px; */

        }
        .x01{
            width: 60px;
        }
        .x02{
            width: 30px;
        }

        .yuan1{
            border-radius: 8px;
        }
        .yuan2{
            border-radius: 8px 0px 0px 8px;
        }
        .yuan3{
            border-radius: 0px 8px 8px 0px;
        }


        .calendar .calendar-btn:hover{
            background-color:#1f71a1;
        }

        .calendar .year-btn
        {
            float:right;
        }

        .calendar .calendar-dates .days .day
        {
            float:left;
            width: 14%;
            /* margin: 1%; */
            padding: 1%;
            font-size:13pt;
            height: 150px;
            /* border-radius: 10px; */
            border: solid 1px #ddd;
        }
        /* xxx */
        .calendar .calendar-dates .days .today
        {
            float:left;
            width: 14%;
            /* margin: 1%; */
            padding: 1%;
            font-size:13pt;
            height: 150px;
            /* border-radius: 10px; */
            border: solid 2px #24aeff;
            color: #046eac;
        }
        .calendar .calendar-dates .days .weiQD
        {
            background-color:#ffa9a9;
        }
        .calendar .calendar-dates .days .yiQD
        {
            background-color:#b9ebae;
        }


        .calendar .calendar-dates .days .day.blank
        {
            background-color: white;
            border:none;
        }

        .calendar .calendar-dates .days .day.selected
        {
            background-color: #1caff6;
            color: white;
            cursor:pointer;
            opacity: .5;
            transition: .5s opacity;
        }

        .calendar .calendar-dates .days .day.selected:hover
        {
            opacity: 1;
        }

        .calendar .calendar-dates .days .day.label
        {
            height: 40px;
            background-color: white;
            color: black;
            border:none;
            font-weight:bold;
        }

        .clear{
            clear:both;
        }

        @media only screen and (max-width: 960px) {
            .calendar{
                width: 100%;
                margin: 0px;
                margin: 0px;
                box-sizing: border-box;
                position: relative;
                left: 0px;
            }
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">

        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <div class="btn-group-sm" id="toolbar" role="group">
                            <a class="btn btn-success" onclick="$.operate.add();" shiro:hasPermission="paiban:paibanTest:add">
                                <i class="fa fa-plus"></i> 添加
                            </a>
<!--                            <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="paiban:paibanTest:edit">-->
<!--                                <i class="fa fa-edit"></i> 修改-->
<!--                            </a>-->
                            <a class="btn btn-danger multiple" onclick="removeRQ()">
                                <i class="fa fa-remove"></i> 删除
                            </a>
<!--                            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="paiban:paibanTest:export">-->
<!--                                <i class="fa fa-download"></i> 导出-->
<!--                            </a>-->
                        </div>
                    </ul>
                </div>
            </form>
        </div>


        <div class="col-sm-12 select-table table-striped">
            <div class="calendar" id="calendar">
                <div class="calendar-btn month-btn x01 yuan1" onclick="toggleMonths()">
                    <span id="curMonth"></span>
                    <div id="months" class="months dropdown"></div>
                </div>


                <div class="calendar-btn year-btn x02 yuan3" id="addR" onclick="loadaddYears()">
                    <span>+</span>
                </div>
                <div class="calendar-btn year-btn x01" >  <!-- onclick="toggleYears()" -->
                    <span id="curYear"></span>
                    <div id="years" class="years dropdown"></div>
                </div>
                <div class="calendar-btn year-btn x02 yuan2" id="suL" onclick="loadsubtractYears()">
                    <span>-</span>
                </div>



                <div class="clear"></div>

                <div class="calendar-dates">
                    <div class="days">

                        <div class="day label">一</div>
                        <div class="day label">二</div>
                        <div class="day label">三</div>
                        <div class="day label">四</div>
                        <div class="day label">五</div>
                        <div class="day label">六</div>
                        <div class="day label">日</div>
                        <br><br><br>

                        <div class="clear"></div>
                    </div>

                    <div id="calendarDays" class="days"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">



    // date.value =
    var editFlag = [[${@permission.hasPermi('paiban:paibanTest:edit')}]];
    var removeFlag = [[${@permission.hasPermi('paiban:paibanTest:remove')}]];
    var prefix = ctx + "paiban/paibanTest";

    $(function() {
        var options = {

            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
        };
        $.table.init(options);
    });



    function toggleMonths() {
        var cont = document.getElementById('months');
        if (cont.style.display == 'block') {
            cont.style.display = 'none';
        } else {
            cont.style.display = 'block';
        }
    }




    var months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
    const curDate = new Date();
    const curYear = curDate.getFullYear(); // returns 2023
    const curMonths = curDate.getMonth();
    const td = curDate.getDate();

    var month = 0;
    var year = 0;

    function loadCalendarMonths() {
        for (var i = 0; i < months.length; i++) {
            var doc = document.createElement("div");
            doc.innerHTML = months[i];
            doc.classList.add("dropdown-item");
            doc.id=String(i+1);



            doc.onclick = (function () {
                var selectedMonth = i;
                return function () {
                    month = selectedMonth;
                    document.getElementById("curMonth").innerHTML = months[month];
                    loadCalendarDays();
                    return month;


                }
            })();

            document.getElementById("months").appendChild(doc);
        }
    }

    // 年.substring(6,7)


    function loadaddYears() {
        var currentYear = parseInt(document.getElementById("curYear").innerHTML) + 1
        document.getElementById("curYear").innerHTML = currentYear;
        year =  currentYear;
        loadCalendarDays();
    }

    function loadsubtractYears() {
        var currentYear = parseInt(document.getElementById("curYear").innerHTML) - 1
        document.getElementById("curYear").innerHTML = currentYear;
        year =  currentYear;
        loadCalendarDays();
    }





    // 获取上个月日期
    function ISO_numeric_date(dt)
    {
        return (dt.getDay() === 0 ? 7 : dt.getDay());
    }
    // 获取本月有多少天
    function daysInMonth(month, year)
    {
        var d = new Date(year, month + 1, 0);
        return d.getDate();
    }


function removeRQ(){
        var Str = ""
    //div id="calendarDays"
        var divlist = $('div[id="calendarDays"]').children()
        // console.log(divlist.children('input')[0].checked);
    for (let i=0; i < divlist.children('input').length; i++) {
            var check_ =  divlist.children('input')[i].checked
            if (check_ === true){

                // const a = divlist[i].innerText.split("\\n")[0];
                const a = divlist[i+5].id;
                Str = Str + a+",";
                console.log(Str);
            }

    }
    $.ajax({
        url:"/paiban/paibanTest/remove",//要请求的服务器url
        data:{
            date:Str
        },//第一个name对应的是后端request.getParameter("name")的name、第二个name对应的是此js中的var name = $("#name").val();的name
        async:false,//是否是异步请求
        cache:false,//是否缓存结果
        type:"POST",//请求方式
        //dataType:"text",//服务器返回什么类型数据 text xml javascript json(javascript对象)
        success:function(result){//函数会在服务器执行成功后执行，result就是服务器返回结果
            location.reload();
        }
    })
}


    // 加载本月日期
    function loadCalendarDays() {
        var rmonth = parseInt(document.getElementById("curMonth").innerText);
        var ryear = document.getElementById("curYear").innerText;
        // var rmonth01 = String(rmonth);


        var paiban = $("#paiban").val();

        var ajax_ = $.ajax({
            url:"/paiban/paibanTest/list",//要请求的服务器url
            data:{
                month:rmonth,
                year:ryear
            },//第一个name对应的是后端request.getParameter("name")的name、第二个name对应的是此js中的var name = $("#name").val();的name
            async:false,//是否是异步请求
            cache:false,//是否缓存结果
            type:"POST",//请求方式
            //dataType:"text",//服务器返回什么类型数据 text xml javascript json(javascript对象)
            success:function(result){//函数会在服务器执行成功后执行，result就是服务器返回结果
                paiban=result
                console.log(paiban);
            }
        });
        $.when(ajax_).done(function () {
        });


        document.getElementById("calendarDays").innerHTML = "";

        var tmpDate = new Date(year, month, 0); // 2023-3
        var num = daysInMonth(month, year); // 30
        var dayofweek = ISO_numeric_date(tmpDate);       // find where to start calendar day of week  月天数dayofweek 5

        for (var i = 1; i <= dayofweek; i++) {
            var d = document.createElement("div");
            d.classList.add("day");
            d.classList.add("blank");
            document.getElementById("calendarDays").appendChild(d);
        }
        var d;var numi = 0;var divoff=0;var ifoff=1;
        for (var i = 0; i < num; i++) {
            var tmp = i + 1;
            if (divoff===0){
                d = document.createElement("div");
            }
            divoff =0;
            d.id = year+'-'+(month+1)+'-'+ (i+1);
            d.className = "day";
            // var inpid = year+'-'+(month+1)+'-'+ (i+1);
            d.innerHTML = '<input type="checkbox" >'+tmp+'<hr>';

            var pby;var pbm;var pbd;    //年月日
            var ffpbd;var numii;    //昨天
            var jjpbd;var numjj;    //明天
            if (numi<paiban.length){  //限制numi值在paiban长度内阻止错误退出循环
                pby = parseInt(paiban[numi]["date"].substring(0,4));
                pbm = parseInt(paiban[numi]["date"].substring(6,7));
                pbd = parseInt(paiban[numi]["date"].substring(8,10));
                numii = numi-1;
                if (numii>=0){
                    ffpbd = parseInt(paiban[numii]["date"].substring(8,10));
                }
                numjj = numi+1;
                if (numjj<paiban.length){
                    jjpbd = parseInt(paiban[numjj]["date"].substring(8,10));
                }
            }
            if (numi>=paiban.length){
                pby = 0;
                pbm = 0;
                pbd = 0;
            }
            var nameoff;
            // console.log(paiban.length);
            // console.log(year+"  "+rmonth+"   "+tmp)
            // console.log(pby+"  "+pbm+"   "+pbd)
            // console.log(numi)
            // console.log(rmonth)

            if (year === pby && rmonth === pbm && ffpbd===pbd){
                tmp = tmp -1;
                i =i-1;
                divoff = 1;
            }
            if (pby===year  && pbm===rmonth  && pbd===tmp && pbd===jjpbd && numi!=paiban.length-1){
                nameoff = 1;
                // if (numjj===paiban.length-1){
                //     ifoff = 0;
                // }
            }else if (tmp===num && pbd===num && jjpbd===num){
                ifoff = 1;
            }
            console.log("A,"+pby+","+pbm+","+tmp+"x"+num);
            console.log("B,"+year+","+rmonth+","+tmp+":"+pbd+":"+jjpbd+","+nameoff+","+ifoff);

            if ( year === pby && rmonth === pbm && tmp === pbd){
                    var pbname = paiban[numi]["yuangongName"];
                    d.innerHTML = d.innerHTML+'<div onclick="setVar('+pby+','+pbm+','+tmp+')">'+pbname;


                var pbqd;
                if (numi<paiban.length){  //限制numi值在paiban长度内阻止错误退出循环
                    pbqd = String(paiban[numi]["qiandaoStatus"]);
                }if (numi>paiban.length){
                    pbqd = "X";
                }
                // console.log( pbd && pby<parseInt(curYear) && pbm<curMonths && pbd<td);
                // console.log(curMonths);
                if (pbqd === "0" && pby<=curYear &&( pbm<curMonths+1 || (pbm==curMonths+1 && pbd<=td))){
                    d.className = d.className + " weiQD";
                }else if (pbqd === "1"){
                    d.className = d.className + " yiQD";
                }
                // console.log(pbm+','+pbd);
                // console.log(curMonths+1+','+td);
                numi=numi+1;
                }

            if (nameoff===1 && ifoff===1){
                d.innerHTML = d.innerHTML+"* * *";

            }
            nameoff = 0;

            if(tmp == td && year == parseInt(curYear) && month == curMonths ){
                d.className ="today";
                console.log("*"+pbqd+pbname+pbd)
                if (pbqd === "0" && pbd===tmp){
                    d.className = d.className + " weiQD";
                }else if (pbqd === "1" && pbd===tmp){
                    d.className = d.className + " yiQD";
                }else {
                    d.className = d.className;
                }
            }



            document.getElementById("calendarDays").appendChild(d);
        }

        var clear = document.createElement("div");
        clear.className = "clear";
        document.getElementById("calendarDays").appendChild(clear);
    }



    window.addEventListener('load', function () {
            var date = new Date();
            month = date.getMonth();
            year = date.getFullYear();
            // console.log(year);
            document.getElementById("curMonth").innerHTML = months[month];
            document.getElementById("curYear").innerHTML = year;
            loadCalendarMonths();
            loadCalendarDays();

        }
    );

function setVar(year,month,day) {
    var id = returnID(year,month,day)
    // $.ajax({
    //     url:"/paiban/paibanTest/edit/"+month+"/"+day,//要请求的服务器url
    //     data:{},//第一个name对应的是后端request.getParameter("name")的name、第二个name对应的是此js中的var name = $("#name").val();的name
    //     async:false,//是否是异步请求
    //     cache:true,//是否缓存结果
    //     type:"get",//请求方式
    //     //dataType:"text",//服务器返回什么类型数据 text xml javascript json(javascript对象)
    //     success:function(result){//函数会在服务器执行成功后执行，result就是服务器返回结果
    //
    //     }
    // });
    $.modal.open("详细" + table.options.modalName, "/paiban/paibanTest/edit/"+year+"/"+month+"/"+day)
}
    function returnID(year,month,day) {
        $.ajax({
            url:"/paiban/paibanTest/IDreturn/"+year+"/"+month+"/"+day,//要请求的服务器url
            data:{},//第一个name对应的是后端request.getParameter("name")的name、第二个name对应的是此js中的var name = $("#name").val();的name
            async:false,//是否是异步请求
            cache:false,//是否缓存结果
            type:"post",//请求方式
            //dataType:"text",//服务器返回什么类型数据 text xml javascript json(javascript对象)
            success:function(result){//函数会在服务器执行成功后执行，result就是服务器返回结果
                return result
            }
        });
        return null
    }
</script>
</body>
</html>